import { useState } from "react"


import './register.scss'


export default function Register(props) {
    // const [q, setq] = useState(false);
    const [q, setq] = useState(false);
    const [yz, setyz] = useState(false);
    const [Ainp, setAinp] = useState('inp');
    const [Cinp, setCinp] = useState('inp');
    const [mima, setmima] = useState(false);
    const [zm, setzm] = useState('p2');
    const [cd, setcd] = useState('p1');
    const [tel, settel] = useState(false);
    const [mm, setmm] = useState(false);
    const [cinp, setcinp] = useState('inp');
    const [kongge, setkongge] = useState('p3');


    //用户名
    function Ainput(e) {//用户名输入
      
    }
    function Afocus() {//用户名聚焦
        console.log('聚焦');
        setq(true)
        setAinp('inpl')
        setyz(false)
    }
    function Ablur(e) {//用户名失焦
          // var reg = /^[\u4e00-\u9fa5]{1,7}$|^[A-Za-z_]{1,14}$/
          var reg = /^[a-zA-Z_\u4e00-\u9fa5\d]+$/.test(e.target.value)
          var reg2 = !/^\d/.test(e.target.value)
          // console.log(reg);
          if(reg&&reg2){
              setAinp('inp')
              setyz(false)
          }else{
              setAinp('inph')
              setyz(true)
          }
    }

    //密码
    function Cinput(e) {//密码输入
        var reg = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{8,14}$/
        var a = reg.test(e.target.value)
        let regs=/((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))(?!^.*[\u4E00-\u9FA5].*$)/
        let value=e.target.value//密码
        const regss = new RegExp(/\s/)
        var kg = regss.test(e.target.value)
        console.log(kg);
        if(kg){
            setkongge('pp3')
        }else{
            setkongge('p3')
        }
        if(!regs.test(value)) {
            console.log(123);
            setzm('pp2')
        }else{
            setzm('p2')
        }
        if(e.target.value.length<8||e.target.value.length>14){
            setcd('pp1')
        }else{
            setcd('p1')

        }
    }
    function Cfocus(e) {//密码聚焦
        setmima(true)
        setCinp('inpb')
        var reg = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{8,14}$/
        var a = reg.test(e.target.value)
        console.log(a);
        console.log(e.target.value.length);
        if(e.target.value.length<8||e.target.value.length>14){
            setcd('pp1')
        }else{
            setcd('p1')

        }
    }
    function Cblur(e) {//密码失焦
        console.log(e.target.value);
        setmima(false)
        var reg = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{8,14}$/
        var a = reg.test(e.target.value)
        console.log(a);
        if(!a){
            setmm(true)
            setCinp('inpr')
        }else{
            setmm(false)
        }
        console.log(e.target.value.length);
        if(e.target.value.length<8||e.target.value.length>14){
            setcd('pp1')
        }else{
            setcd('p1')
        }
    }
    //手机号
    function Binput(e) {//手机号输入
        if(e.target.value!==' '){

            var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
            var a = reg.test(e.target.value)
            console.log(a);
           
            if(!a){
                settel(false)
            }
        }
       
    }
    function Bfocus(e) {//手机号聚焦
        setcinp('inpb')
        if(e.target.value!==' '){

            var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
            var a = reg.test(e.target.value)
            console.log(a);
            if(!a){
                settel(false)
            }
        }
    }
    function Bblur(e) {//手机号失焦
        if(e.target.value!==' '){
            var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
            var a = reg.test(e.target.value)
            console.log(a);
            if(!a){
                setcinp('inpr')
                settel(true)
            }else{
                setcinp('inp')
                settel(false)
            }
        }
    }

    return(
        <div className="register">
            <div className="kuang">
                <div className="new-reg-guide-login">
                    <h3>欢迎注册</h3>
                    <p>已有帐号？
                        <span id="login_btn">登录</span>
                    </p>
                </div>
                <div className="bott">
                    <div className="A">
                        <span className="yhm">用户名</span>
                        <input type="text"  className={Ainp} onInput={(e)=>{Ainput(e)}} onFocus={(e)=>{Afocus(e)}} onBlur={(e)=>{Ablur(e)}}/>
                        {q&&(
                            <div className="a">
                                <div className="e">设置后不可更改，中英文均可，最长14个英文或者7个汉字</div>
                            </div>
                        )}
                        {
                            yz&&(
                                <div className="yz">用户名仅支持中英文、数字和下划线,且不能为纯数字</div>
                            )
                        }
                    </div>
                    <div className="B">
                        <span className="yhm" >手机号</span>
                        <input type="text"  className={cinp} onInput={(e)=>{Binput(e)}} onFocus={(e)=>{Bfocus(e)}} onBlur={(e)=>{Bblur(e)}}/>
                        {
                            tel&&(
                                <div className="tel">手机号格式不正确</div>
                            )
                        }
                    </div>
                    <div className="C">
                        <span className="yhm">密&nbsp;&nbsp;&nbsp;码</span>
                        <input type="password"  className={Cinp} onInput={(e)=>{Cinput(e)}} onFocus={(e)=>{Cfocus(e)}} onBlur={(e)=>{Cblur(e)}}/>
                       {mima&& <div className="mm">
                            <div className={cd}>长度8-14个字符</div>
                            <div className={zm}>字母/数字以及标点符号至少两总</div>
                            <div className={kongge}>不允许有空格，中文</div>
                        </div>}
                        {
                            mm&&(
                                <div className="mmm">密码设置不符合要求</div>
                            )
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}